<template>
  <div class="con">
    <div class="zhong">
      <el-carousel height="18vw">
        <el-carousel-item v-for="item in lunbo"
                          :key="item.id">
          <img :src="item.imgUrl"
               style="width: 100%;height: 100%;"
               @click="linkLunbo(item)" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="div">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <!-- :to="{ path: '/' }" -->
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="dangqian">需求发布列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nei">
        <div class="left">
          <div class="navbox"
               :class="{show:!a3}">
            <div class="one">
              <div class="wid">类型:</div>
              <div>
                <span v-for="(item,index) in list1"
                      :key="index"
                      :class="{a:a1==index}"
                      @click="hand1(index)">{{item.name}}</span>
              </div>
            </div>
            <div class="one">
              <div>地区:
                <el-cascader v-model="value"
                             @change='hand12'
                             :options="options"
                             separator='-'
                             filterable></el-cascader>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="item"
                 v-for="(item,index) in list"
                 :key="index">
              <div class="le">
                <div class="a"
                     @click="link(item.id)">{{item.title}}</div>
                <div class="b">需求：{{item.intro}}</div>
                <div class="c">
                  <span>发布时间：{{item.caAt?item.caAt.substring(0,10):''}}</span>
                  <span>地区：{{item.city}}</span>
                  <span>状态：<span v-show="item.userCount==0">未领取</span><span v-show="item.userCount>0"
                          class="color">已领取</span> </span>
                  <span style="cursor:pointer;"
                        @click="openalog(item.id)"><i class="el-icon-warning-outline"></i>举报</span>
                </div>
              </div>
              <div class="rig">
                <div class="a d"
                     v-show="item.userCount>0">已领取</div>
                <div class="b d"
                     v-show="item.userCount==0"
                     @click="lingqu(item.id)">领取</div>
                <div class="c">已有{{item.count||0}}家领取 </div>
              </div>
            </div>
            <div>
              <el-pagination background
                             :page-size="15"
                             :current-page.sync="pageNum"
                             layout="prev, pager, next"
                             :total="total"
                             @current-change="handleCurrentChange1"
                             prev-text="上一页"
                             next-text="下一页"
                             class="aut">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="one">
            <div class="title">实时动态</div>
            <div class="nei1">
              <div class="nei2"
                   ref="con1"
                   :class="{anim:animate==true}"
                   @mouseenter="mEnter"
                   @mouseleave="mLeave">
                <div class="item oneline"
                     v-for="(item,index) in dongtai"
                     :key="index"
                     @click="link(item.id)">
                  {{item.phone}}的求购{{item.title}}
                  <!-- {{item}} -->
                </div>
              </div>
            </div>
          </div>
          <div class="two">
            <div class="two1">
              <div>优质需求</div>
              <div class="fen">
                <div class="a"
                     :class="{ c: ind2 != 1 }"
                     @click="ind2 != 1 ? jian() : ''">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div>
                  <span class="c">{{ ind2 }}</span>
                  /
                  <span>{{you.length}}</span>
                </div>
                <div class="a b"
                     :class="{ c: ind2 != you.length }"
                     @click="ind2 != you.length ? add() : ''">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </div>
            <div class="xuqiu"
                 v-if="you[ind2-1]">
              <div class="a"
                   @click="link(you[ind2-1].id)">{{you[ind2-1].title}}</div>
              <div class="b">
                {{you[ind2-1].intro}}
              </div>
              <div class="c">
                <span>{{you[ind2-1].caAt?you[ind2-1].caAt.substring(5,10):''}}发布</span>
                <span>{{you[ind2-1].city}}</span>
                <span>{{you[ind2-1].count}}家已领取</span>
              </div>
              <div class="d e"
                   v-show="you[ind2-1].userCount==0"
                   @click="lingqu(you[ind2-1].id)">领取</div>
              <div class="d f"
                   v-show="you[ind2-1].userCount>0">已领取</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="举报信息"
               :visible.sync="dialogVisible">
      <el-form :model="form"
               label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"
                    placeholder="请输入你的姓名"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"
                    placeholder="请输入你的手机号"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.content"
                    placeholder="请输入你要举报的内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="jubao">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import options from '@/assets/js/Provinces'
export default {
  name: '',
  data () {
    return {
      a1: 0,//类型
      a2: 0,//类型
      a3: false,
      ind2: 1,
      pageNum: 1,
      list1: [],
      list2: [],
      list: [],
      total: 0,
      // num: 0,
      dongtai: [],
      you: [],
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
        content: '',
        status: 1
      },
      lunbo: [],
      animate: false,
      value: [0],
      options: [],
      xuqiuId: "" // 举报的需求id
    }
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    this.$postRequest('/api/cms/slide/list', {
      type: 6
    }).then(res => {
      this.lunbo = res.data
    })
    let a = [{
      "value": 0,
      "label": "全国",
    }, ...options.arr]

    this.options = a
    this.getfenlei()
    this.isinput()
    // this.getcity()
    this.getdongtai()
    this.getyou()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    if (this.dongtai.length > 8) {
      this.timer1 = setInterval(this.scroll, 1000)
    }
    // console.log('options', options)

  },
  //计算属性
  computed: {},
  //方法
  methods: {
    getfenlei () {
      this.$postRequest('/api/need/getNeedType', {}).then(res => {
        console.log('aaaaaaaaaaaaaaaa', res.data)
        res.data.unshift({ id: '', name: '全部' })
        this.list1 = res.data
        console.log('aaaaaaaaaaaaaaaa', res.data, this.list1)
        this.getlist()
      })
    },

    getlist () {
      var obj = {}
      if (this.value.length == 1) {
        obj = this.options.find(obj => {
          return obj.value === this.value[0]
        })
      } else {
        this.options.forEach(r => {
          if (r.value === this.value[0]) {
            obj = r.children.find(res => {
              return res.value === this.value[1]
            })
          }
        })
      }
      this.$postRequest('/api/mallNeed/getNeedListByTypeIdAndCity', {
        pageNum: this.pageNum,
        pageSize: 15,
        userId: localStorage.getItem('userId') || -1,
        city: obj.label == '全国' ? '' : obj.label,
        typeId: this.list1[this.a1].id
      }).then(res => {
        this.list = res.data.list
        this.total = res.data.total
      })
    },
    getdongtai () {
      this.$postRequest('/api/mallNeed/getTodayNeed', {}).then(res => {
        this.dongtai = res.data
      })
      // this.dongtai = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    getyou () {
      this.$postRequest('/api/mallNeed/getRecommendNeed', {
        userId: localStorage.getItem('userId') || -1
      }).then(res => {
        this.you = res.data.list
      })
    },
    linkLunbo (item) {
      if (item.mode == 0) {
        this.$router.push({ name: 'detail', query: { id: item.goodsId } })
      } else if (item.mode == 1) {
        window.location.href = item.linkUrl
      }
    },
    lingqu (id) {
      if (localStorage.getItem('userId')) {
        this.$postRequest('/api/mallNeed/receiveNeed', {
          userId: localStorage.getItem('userId'),
          needId: id
        }).then(res => {
          this.$message.success('领取成功')
          this.getdongtai()
          this.getyou()
          this.getlist()
        })
      } else {
        this.$router.push({ name: 'loginindex', params: { name: 'demand' } })
      }
    },
    link (id) {
      this.$router.push({ name: 'releaseitem', query: { id: id } })
    },
    isinput () {
      this.$store.commit('setDValue', false)
    },
    hand1 (a) {
      if (this.a1 != a) {
        this.a1 = a
        this.getlist()
      }
    },
    hand12 (a) {
      // if (this.a2 != a) {
      //   this.a2 = a
      this.getlist()
      // }
    },
    handleCurrentChange1 (currentPage) {
      this.getlist()
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    jian () {
      if (this.ind2 > 1) {
        this.ind2--;
      }
    },
    add () {
      if (this.ind2 < this.you.length) {
        this.ind2++;
      }
    },
    openalog (id) {
      this.xuqiuId = id;
      this.dialogVisible = true
    },
    jubao () {
      var tellreg = /^1[0-9]{10}$/;
      if (!this.form.name) {
        this.$message.error('请输入你的姓名')
      } else if (!this.form.phone) {
        this.$message.error('请输入你的手机号')
      } else if (!this.form.content) {
        this.$message.error('请输入你要举报的内容')
      } else if (!tellreg.test(this.form.phone)) {
        this.$message.error('手机号输入有误，请确认后重新提交')
      } else {
        this.form.type = "1";
        this.form.backId = this.xuqiuId;
        this.$postRequest('/api/trotocol/saveFeedback', this.form).then(res => {
          this.$message.success('举报成功')
          this.dialogVisible = false
        })
      }
    },
    scroll () {
      let con1 = this.$refs.con1;
      if (con1.style) {
        con1.style.marginTop = '-30px';
        this.animate = !this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function () {
          that.dongtai.push(that.dongtai[0]);
          that.dongtai.shift();
          con1.style.marginTop = '0px';
          that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 500)
      }
    },
    mEnter () {
      clearInterval(this.timer1)
    },
    mLeave () {
      this.timer1 = setInterval(this.scroll, 1000)
    },
  },
  destroyed () {
    clearTimeout(this.timer1) // 清除
  }
}
</script>
<style scoped  lang="scss">
.con {
  background-color: #f9f9f9;
  .zhong {
    width: 100%;
    height: 18vw;
    .zhongdi {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      img {
        width: 100%px;
        height: 180px;
      }
    }
  }
  .img {
    width: 100%;
  }
  .div {
    width: 1400px;
    margin: auto;
    /deep/ .el-breadcrumb {
      height: 48px;
      font-size: 14px;
      line-height: 48px;
      .el-breadcrumb__inner {
        color: #999;
        font-weight: 500;
      }
      .dangqian .el-breadcrumb__inner {
        color: #1a69e0;
      }
    }
    .nei {
      width: 100%;
      display: flex;
      margin-bottom: 80px;
      margin-right: 20px;
      .left {
        width: 1100px;
        .navbox {
          width: 100%;
          background: #fff;
          border: 1px solid #eee;
          padding: 20px 28px;
          margin: 0 auto 20px;
          &.show {
            max-height: 116px;
            overflow: hidden;
          }
          .zhuankai {
            cursor: pointer;
          }
          .one {
            display: flex;
            align-items: baseline;
            .wid {
              width: 70px;
              flex: none;
            }
            .wid2 {
              width: 918px;
            }
            span {
              font-size: 16px;
              cursor: pointer;
              display: inline-block;
              border: 1px solid transparent;
              padding: 7px 15px;
              margin: 0 10px 10px 10px;
              transition: 0.2s;
            }
            span:last-child {
              margin-right: 0;
            }
            .a {
              // border: 1px solid #1a69e0;
              color: #1a69e0;
              // background: #f3f7fd;
            }
          }
          // #eee
        }
        .list {
          width: 100%;
          background: #fff;
          padding: 0 20px 10px;
          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
            .le {
              width: 860px;
              padding: 20px 0;
              .a {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 16px;
                cursor: pointer;
              }
              .b {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                line-height: 20px;
                margin-bottom: 20px;
              }
              .c {
                height: 14px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                & > span {
                  margin-right: 30px;
                  .color {
                    color: #e0441a;
                  }
                }
              }
            }
            .rig {
              width: 120px;
              text-align: center;
              .d {
                width: 120px;
                height: 40px;
                margin-bottom: 18px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
              }
              .a {
                background: #eeeeee;
                color: #000000;
              }
              .b {
                background: #1a69e0;
                color: #ffffff;
              }
              .c {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
              }
            }
          }
          .aut {
            text-align: center;
            margin-top: 14px;
            margin-bottom: 14px;
          }
          /deep/ .el-pagination button,
          .el-pagination span:not([class*='suffix']) {
            width: 60px;
          }
        }
      }
      .right {
        width: 280px;
        margin-left: 20px;
        .one {
          width: 280px;
          height: 320px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          .title {
            width: 100%px;
            height: 50px;
            line-height: 50px;
            background: #ffffff;
            border-bottom: 1px solid #eeeeee;
            padding-left: 20px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
          .nei1 {
            height: 250px;
            overflow: hidden;
          }
          .anim {
            transition: all 0.5s;
          }
          .item {
            padding: 0 20px;
            margin: 14px 0;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            cursor: pointer;
          }
        }
        .two {
          width: 100%;
          background: #ffffff;
          margin-top: 20px;
          margin-bottom: 20px;
          border: 1px solid #eeeeee;
          .two1 {
            width: 100%;
            padding-left: 20px;
            height: 50px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
            .fen {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              .a {
                width: 20px;
                height: 20px;
                font-size: 20px;
                cursor: pointer;
                margin-right: 22px;
              }
              .b {
                margin-left: 22px;
              }
              .c {
                color: #000000;
              }
            }
          }
          .xuqiu {
            padding: 10px 20px;
            .a {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #000000;
              margin-bottom: 16px;
              cursor: pointer;
            }
            .b {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #666666;
              line-height: 20px;
              margin-bottom: 16px;
            }
            .c {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              span {
                margin-right: 30px;
              }
            }
            .d {
              width: 175px;
              height: 40px;

              margin: 26px auto 20px;
              line-height: 40px;
              text-align: center;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;

              cursor: pointer;
              &:hover {
                opacity: 0.8;
              }
              &.e {
                background: #1a69e0;
                color: #ffffff;
              }
              &.f {
                color: #000000;
                background: #eeeeee;
              }
            }
          }
        }
      }
    }
  }
}
</style>